
// table栏
$(function(){
    $(".table-con").find(".top li").click(function(){
        $(this).addClass("con").siblings().removeClass("con");
        var $index=$(this).index();
        console.log($(this));
        $(this).parents(".table-con").find(".down li").eq($index).addClass("block").siblings().removeClass("block");
    });
})


// 回到顶部
$(function(){
    $(".talist-bmtab").on("click", "a", function () {
      $("html, body").animate({
          scrollTop: $($(this).attr("href")).offset().top + "px",
        },500);
      return false;
    });
  })



let jsonData = [];

$(function(){
    $("#goshopping").click(function(){
        let goods=null;
        try{
            let index=getUrlParams("id");
            console.log(index);
            goods=jsonData[index-1];
        }catch(error){
            console.log(error)
            alert("获取的商品出错");
            return;
        }
        let flag=true;
        let goodsCar=JSON.parse(localStorage.getItem("goods_car"));
        if(!goodsCar){
            goodsCar=[];
            goods.num=1;
            goodsCar.push(goods);
        }else{
            goodsCar.forEach(item => {
                if(item.id==goods.id){
                    flag=false;
                    item.num+=1;
                }
            });
            if(flag){
                goodsCar.push(goods);
            }
        }
        localStorage.setItem("goods_car",JSON.stringify(goodsCar));
        window.location.href="./shopping.html";
    })
})

$(function(){
    $.getJSON("./data/data.json",function(data){
        //获取浏览器地址栏里的参数 id=xxx ,id为json数组的下标
        const id=getUrlParams("id");
        console.log(id)
        jsonData = data;
        //从商品列表里面拿到对应下标的商品
        const goods=jsonData[id-1];
        console.log(goods)
        // 商品标题
        $("#title").text(goods.title);

        // 格式化价格
        let arr=String(goods.price).split("").reverse();
        console.log(arr);
        str1="";
        for(let i=0,j=1;i<arr.length;i++,j++){
            str1+=arr[i];
            console.log(str1);
            // if(j%3===0) str1+=",";
        }
        str1=str1.split("").reverse().join("");
        console.log(str1);
        $("#price").text(str1);
        // 大图
        $("#minddle-box").append("<img src='"+goods.imgbig[0] +"' alt=''>");
        // 放大镜
        $("#bigimg").attr("src",goods.imgbig[0]);
        // 小图列表
        let smallHtml="";
        goods.imgsmall.forEach(item=>{
            smallHtml+="<li><img src='"+item+"' alt=''></li>";
        })
        $("#smUl").append(smallHtml);
    });
})

//放大镜
/*
 *  公式:  小图/大图=小区域/大区域
 *   只能修改小区域
 *   小区域=(小图/大图)*大区域
 *  比例=大区域/小区域
 * */
//  40/200 == 300/800

$(window).load(function(){
    $("#middleArea").css("width",$("#big-box").width()/$("#bigimg").width()*$("#minddle-box").width());
    $("#middleArea").css("height",$("#big-box").height()/$("#bigimg").height()*$("#minddle-box").height());
 
     $("#minddle-box").hover(function(){
         $("#middleArea").show();
         $("#big-box").show();
 
         $(document).mousemove(function(e){
             // console.log(e);
             var mX=e.pageX -$("#minddle-box").offset().left-$("#middleArea").width()/2;
             var mY=e.pageY-$("#minddle-box").offset().top-$("#middleArea").height()/2;
 
             if(mX<=0){
                 mX=0;
             }
             if(mY<=0){
                 mY=0;
             }
             if(mX>=$("#minddle-box").width()-$("#middleArea").width()){
                 mX=$("#minddle-box").width()-$("#middleArea").width()
             }
             if(mY>=$("#minddle-box").height()-$("#middleArea").height()){
                 mY=$("#minddle-box").height()-$("#middleArea").height()
             }
             $("#middleArea").css({
                 left:mX,
                 top:mY
             });
             //算数比例
             // 大图/小图
             // 大区域/小区域  
             let scale=$("#bigimg") .width()/$("#minddle-box").width();
             $("#bigimg").css("left",-scale*mX);
             $("#bigimg").css("top",-scale*mY)
         })
 
     },function(){
         $("#middleArea").hide();
         $("#big-box").hide();
     })
 
     $("#min-box li").on("click",function(){
         $(this).addClass("mov").siblings().removeClass("mov");
         var $index=$(this).index();
         console.log($index)
         $("#minddle-box img").attr("src",`./../images/xiangqing${getUrlParams("id")}-${$index-1}.jpg`);
         $("#bigimg").attr("src",`./../images/xiangqing${getUrlParams("id")}-${$index-1}-1.jpg`);
         
     });
 })

function getUrlParams(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
}


//飞入效果
// $(function(){
//    var table=$("#table").offset();
//    console.log(table);
//    var Null=0;
//    $("#goshopping").click(function(){
//        Null++;
//        var _this=$(this);
//        var IMG=_this.parents(".loupe").find("#minddle-box").find("img");
//        console.log(IMG);
//        var addclid=IMG.clone().css("opacity","0.6");
//        $("#loupe-l").append(addclid);
//        addclid.css({
//         'z-index': 99999,
//         'border': '3px solid #FFFFFF',
//         'position': 'absolute',
//         'height': IMG.height() + 'px',
//         'width': IMG.width() + 'px',
//         'top': IMG.offset().top + 'px',
//         'left': IMG.offset().left + 'px',
//        });
//        addclid.animate({
//         'width': 50 + 'px',
//         'height': 50 + 'px',
//         'border-radius': 100 + '%',
//        },function(){
//            addclid.animate({
//             'top': ($('#table').height()) / -2 + 'px',
//             'left': ($(document).width()) - ($('#model').width()) + 'px', //当前窗口的宽度-购物车的宽度   
//             'width': 0,
//             'height': 0,
//            },1500,function(){
//                addclid.remove();
//                $(".cartItemCount").text(Null)
//                $("#SPAN").text(Null);
//            });
//        });
//        return false;
//    });
// })